<template>
    <div class="index">
        <div class="userinfo">
            <el-row :gutter="0">
                <el-col :span="8">
                    <el-image :src="userinfo.avatarUrl"></el-image>
                </el-col>
                <el-col :span="16">
                    <el-row :gutter="0" justify="space-between" align="middle">
                        <el-col :span="12">
                            <h3>{{ userinfo.nickname }}</h3>
                        </el-col>
                        <el-col :span="12">
                            <el-button type="info" plain @click="qiandao" :disabled="isqiandao">签到</el-button>
                            <el-button type="info" plain @click="changeInfo">修改信息</el-button>
                        </el-col>
                    </el-row>
                    <el-divider style="margin: 0;"></el-divider>
                    <el-row :gutter="0">
                        <el-col :span="8">
                            <p>{{ userinfo.djStatus }}</p>
                            <p>动态</p>
                        </el-col>
                        <el-col :span="8">
                            <p>{{ userinfo.djStatus }}</p>
                            <p>关注</p>
                        </el-col>
                        <el-col :span="8">
                            <p>{{ userinfo.djStatus }}</p>
                            <p>粉丝</p>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </div>

        <div class="songlist">
            <UserSongList :songlist="songlist" :title="`我创建的歌单`"></UserSongList>
            <UserSongList :songlist="songlist2" :title="`我收藏的歌单`"></UserSongList>
        </div>
    </div>

    <el-dialog title="修改信息" v-model="changeFromOpen" width="800" append-to-body :before-close="handleClose">
        <el-form :model="changeInfoForm" class="demo-form-inline" inline>
            <el-form-item label="昵称">
                <el-input v-model="changeInfoForm.nickname"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <!-- 下拉框，1是男，2是女，0是保密 -->
                <el-select v-model="changeInfoForm.gender" placeholder="请选择" style="width:100px ;">
                    <el-option label="男" :value="1"></el-option>
                    <el-option label="女" :value="2"></el-option>
                    <el-option label="保密" :value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="生日">
                <el-date-picker type="date" placeholder="选择日期" v-model="changeInfoForm.birthday"></el-date-picker>
            </el-form-item>
            <!-- 地区 -->
            <el-form-item label="地区">
                <el-row :gutter="0">
                    <el-col :span="12">
                        <!-- 省份 -->
                        <el-select v-model="changeInfoForm.province" placeholder="请选择省份" style="width:100px ;"
                            @change="provinceChange">
                            <el-option v-for="item in provinceList" :key="item.code" :label="item.name"
                                :value="item.code"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="12">
                        <!-- 城市 -->
                        <el-select v-model="changeInfoForm.city" placeholder="请选择城市" style="width:100px ;">
                            <el-option v-for="item in cityList" :key="item.code" :label="item.name" :value="item.code">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="个性签名">
                <el-input v-model="changeInfoForm.signature" type="textarea"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">确认修改</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import UserSongList from '@/components/user/UserSongList.vue'
import { getAccountInfo, getUserPlayList, dailySignin, updateUserProfile } from '@/api/user'
import { ref, onMounted } from 'vue'
import { getProvinceList } from '@/utils/getCode'
const songlist = ref([])
const userinfo = ref({})
const songlist2 = ref([])
const isqiandao = ref(false)
const changeInfoForm = ref({})
const changeFromOpen = ref(false)
const provinceList = ref([])
const cityList = ref([])
onMounted(async () => {
    const res = await getAccountInfo()
    userinfo.value = res.profile
    const res2 = await getUserPlayList(res.profile.userId)
    songlist.value = res2.playlist.filter(item => item.userId === res.profile.userId)
    songlist2.value = res2.playlist.filter(item => item.userId !== res.profile.userId)
    provinceList.value = getProvinceList()
})

const qiandao = async () => {
    const res = await dailySignin()
    if (res.code === 200) {
        ElMessage.success('签到成功')
        //禁用按钮
        isqiandao.value = true
    } else {
        ElMessage.error('签到失败')
    }
}

const changeInfo = async () => {
    changeFromOpen.value = true
    const res = await getAccountInfo()
    changeInfoForm.value = {}
    changeInfoForm.value.nickname = res.profile.nickname
    changeInfoForm.value.gender = res.profile.gender
    changeInfoForm.value.birthday = res.profile.birthday
    changeInfoForm.value.province = res.profile.province + ''
    changeInfoForm.value.city = res.profile.city + ''
    changeInfoForm.value.signature = res.profile.signature
    const list = await (getProvinceList().find(item => {
        return item.code == changeInfoForm.value.province
    }))
    cityList.value = list.children
    // changeInfoForm.value.gender = changeInfoForm.value.gender == 1 ? '男' : changeInfoForm.value.gender == 2 ? '女' : '保密'
    changeInfoForm.value.birthday = new Date(changeInfoForm.value.birthday)
    // changeInfoForm.value.province = getProvinceNameByCode(changeInfoForm.value.province)
    // changeInfoForm.value.city = getCityNameByCode(changeInfoForm.value.city)
}

const handleClose = (done) => {
    ElMessageBox.confirm('是否关闭窗口？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
    })
        .then(() => {
            done()
        })
        .catch(() => { })
}

const onSubmit = async () => {
    //时间戳 unix timestamp
    changeInfoForm.value.birthday = changeInfoForm.value.birthday.getTime()
    console.log(changeInfoForm.value);
    const res = await updateUserProfile(changeInfoForm.value)
    console.log(res);
    if (res.code === 200) {
        ElMessage.success('修改成功')
        //修改成功后重新获取用户信息
        const res = await getAccountInfo()
        userinfo.value = res.profile
    } else {
        ElMessage.error('修改失败')
    }
    changeFromOpen.value = false
}

const provinceChange = () => {
    cityList.value = (getProvinceList().find(item => item.code === changeInfoForm.value.province)).children
    changeInfoForm.value.city = cityList.value[0].code
}
</script>

<style lang="less" scoped>
.index {
    height: calc(100vh - 160px);
    padding: 40px 20px;

    .userinfo {

        :deep(.el-image) {
            cursor: pointer;
            width: 200px;
            height: 200px;
            box-shadow: inset 0px 0px 10px -5px rgba(0, 0, 0, .5);

            .el-image__inner {
                position: relative;
                z-index: -1;
                vertical-align: top;
            }

        }
    }

    .songlist {
        padding-bottom: 100px;
    }
}
</style>